<template>
	<div :class="['bussinessLicenseBox', 'settleInfoBox', {'mt40': !isShow}]">
		<div class="settleContItem">
			<p class="title" v-show="isShow">营业执照信息</p>
			<Form ref="settleForm" :model="settleForm" :rules="bussinessValidate" :label-width="144" label-position="left">
                <FormItem label="企业名称" prop="name">
                    <Input v-model.trim="settleForm.name" size="large" placeholder="输入营业执照上的名称"></Input>
                </FormItem>
                <FormItem label="统一社会信用代码" prop="socialCode">
                    <Input v-model.trim="settleForm.socialCode" size="large" :maxlength="18" placeholder="输入营业执照上的注册号"></Input>
                </FormItem>
                <FormItem label="营业执照详细地址" prop="addressProvinceCode" style="display: inline-block;">
                    <Select v-model.trim="settleForm.addressProvinceCode" clearable class="selectInput" @on-change="provinceCodeChange">
				        <Option v-for="item in provinceJson" :value="item.c" :key="item.c">{{ item.n }}</Option>
				    </Select>
                </FormItem>
                <FormItem prop="addressCityCode" class="inputInline">
                	<Select v-model.trim="settleForm.addressCityCode" clearable class="selectInput" @on-change="cityCodeChange">
				        <Option v-for="item in getCity" :value="item.c" :key="item.c">{{ item.n }}</Option>
				    </Select>
                </FormItem>
                <FormItem prop="address" class="inputAddress">
                	<Input v-model.trim="settleForm.address" size="large" placeholder="输入营业执照上的住所" style="display: inline-block"></Input>
                </FormItem>
                <FormItem label="企业经营类型" prop="businessType">
                    <Select v-model.trim="settleForm.businessType" clearable>
				        <Option v-for="item in businessType" :value="item.item_code" :key="item.item_code">{{ item.item_name }}</Option>
				    </Select>
                </FormItem>
                <FormItem label="经营范围" prop="scope" class="categoryInput scopeInputW">
                     <Input v-model.trim="settleForm.scope" size="large" type="textarea" :rows="2" placeholder="输入营业执照上的经营范围"></Input>
                </FormItem>
                <FormItem label="营业执照照片" prop="businessPhoto" class="imgBoxForm">
                    <Input v-model.trim="settleForm.businessPhoto" class="InputNone"></Input>
                    <upload-img @getPhoto="getBussinessPhoto" :imgList="imgList" ref="imgUpload"></upload-img>
                    <!-- <img src="static/images/settle/bussinessLicense.png"> -->
                    <zoomImg style="width: 120px; height: 80px; display: inline-block" :width="70" :ml="-35" :source="1" :imgWidth="'120px'" :imgId="'static/images/settle/bussinessLicense.png'" :title="'营业执照照片'"></zoomImg>
                </FormItem>
            </Form>
		</div>
	</div>
</template>
<script type="text/javascript">
import { provinceJson, cityJson } from "commons/json/city"; 
import { businessTypeJson } from "commons/json/businessType"; 
import UploadImg from "components/commons/UploadImg";
import zoomImg from "./zoomImg";

	 export default {
	 	components: { UploadImg, zoomImg },
	 	props: {
	 		settleForm: {  
			    type: Object
			},
			isShow: {  //样式的使用
				type: Boolean,
				default: false
			},
			imgList: {  //修改信息时获取的图片信息--来自父组件
				type: Array
			},
			OldSocialCode: {  //修改信息时获取的社会统一信用代码
				type: String,
                default: ''
			}
	 	},
	 	data() {
	 		const validateSocialCode = (rule, value, callback) => {
                if(!this.$utils.RegexUtils('SOCIALCODE',value)) {
                    callback(new Error('请输入正确的营业执照上的统一社会信用代码或营业执照号'));
                }else{
                    if(this.OldSocialCode && this.OldSocialCode == value){
                         callback(); 
                         return;
                    }
                	this.$ajax(this.$api.common.userCheck, {socialCode: value}, (data)=> {
                        console.log(data.code);
                        if(data.code == 200){
                            callback(new Error('该统一社会信用代码已存在，请重新输入'));
                        }else{
                            callback();
                        }
                    }, (error)=> {
                        console.log(error);
                    })
                }
            };
	 		return {
                i: 0,  //修改页面获取值时不设置selectStatusP的值--避免获取默认第一个的值覆盖获取的值
	 			selectStatusP: false,  //是否获取默认的第一个cityCode
	 			provinceJson: provinceJson,
	 			cityJson: cityJson,
	 			businessType: businessTypeJson,
	 			bussinessValidate: {
	 				name: [{ required: true, message: '请输入营业执照上的企业名称', trigger: 'blur' }],
                    socialCode: [
                    	{ required: true, message: '请输入营业执照上的统一社会信用代码或营业执照号',max: 18, trigger: 'blur' },
                    	{ validator: validateSocialCode, trigger: 'blur'}
                    ],
                    addressProvinceCode: [{ required: true, message: '请选择相应的省份', trigger: 'change' }],
                    addressCityCode: [{ required: true, message: '请选择相应的城市', trigger: 'change' }],
                    address: [{required: true, message: '请填写营业执照详细地址', trigger: 'blur'}],
                    businessType: [{required: true, message: '请选择企业经营类型', trigger: 'change'}],
                    scope: [{required: true, message: '请输入营业执照上的经营范围', trigger: 'blur'}],
                    businessPhoto: [{required: true, message: '请上传营业执照照片', trigger: 'change'}]
	 			}
	 		}
	 	},
	 	methods: {
	 		validateFun(which) {  //验证表单
	 			let hasError = 0;
	 			for(let k in this.bussinessValidate){
					this.$refs.settleForm.validateField(k, (tips) => {
	                    if (tips) {
	                    	console.log(tips)
	                    	hasError++;
	                    }
                	})
	 			}
	 			console.log(hasError)
	 			if(hasError == 0){
                    if(which){  //审核失败的情况下存在which
                        this.$emit('ItemProgress', 'ok')
                    }else{
                        this.$emit('lintTo', 2,'bussiness')
                    }
				}
	 		},
	 		getBussinessPhoto(id) {  //回调函数获取图片
	 			console.log(id);
	 			this.settleForm.businessPhoto = id;
	 		},
	 		provinceCodeChange(val) {  //change触发下拉框事件
                this.i++;
                if(this.i != 1) {
                  this.selectStatusP = true;
                }else{
                  this.selectStatusP = false;
                }
                this.settleForm.addressProvinceCode = val;
	 		},
            cityCodeChange(val) {
                this.settleForm.addressCityCode = val;
                this.selectStatusP = false;
            }
	 	},
	 	computed: {
            getCity() {
                if (this.settleForm.addressProvinceCode) {
                    let str = (this.settleForm.addressProvinceCode + '').substr(0, 2);
                    let arr = [];
                    cityJson.forEach((value) => {
                        if (value.c.substr(0, 2) == str) {
                            arr.push(value);
                        }
                    });
                    if (this.selectStatusP) {
                        this.settleForm.addressCityCode = arr[0].c;
                    }
                    return arr;
                }
            }
        }
	 }
</script>
<style lang="less" rel="stylesheet/less">
.bussinessLicenseBox {
    width: 642px;
    text-align: left;
    h4 {
        margin-bottom: 20px;
        text-align: left;
        font-size: 16px;
    }
    .settleContItem {
        .categoryInput .ivu-input {
            height: auto !important;
        }
        
        .ivu-form-label-top .ivu-form-item-label {
            padding-bottom: 13px;
        }
        .selectInput {
            width: 100px;
            margin-right: 5px;
        }
        .inputAddress,
        .inputInline {
            display: inline-block;
            vertical-align: bottom;
            .ivu-form-item-content {
                margin-left: 0 !important;
            }
        }
        .inputInline {
            width: 100px;
            margin-right: 6px;
        }
        .inputAddress {
            .ivu-input {
                width: 280px;
            }
        }
        .imgBoxs {
            display: inline-block;
            width: 120px;
            height: 78px;
        }
    }
}
</style>